import {useCallback} from 'react';
import {DatePicker} from 'antd';
import Moment from 'moment';

export default (props) => {
  const {attributes, children, editor, element} = props;

  const handleChange = useCallback((e) => {
    editor.customNodeOnChange(element, {
      ...element.value,
      checked: e.target.checked
    })
  }, [editor, element]);

  const handleChangeDate = useCallback((e) => {
    editor.customNodeOnChange(element, {
      ...element.value,
      endTime: e ? e.format('YYYY-MM-DD') : ''
    })
  }, [editor, element]);

  return (
    <li {...attributes} style={{display: "flex"}}>
      <span contentEditable={false} style={{marginRight: '10px'}}>
        <input
          type="checkbox"
          checked={element.value?.checked}
          onChange={handleChange}
        />
      </span>
      {
        !!element.value.checked ?
          <span className={"line"}>
            {children}
          </span> : <span>{children}</span>
      }
      <span contentEditable={false}>
        <DatePicker
          onChange={handleChangeDate}
          value={new Moment(element.value?.endTime)}
          bordered={false}
        />
      </span>
    </li>
  )
}
